<template>
  <div class="dashboard-container">
    <div class="header">
      <h1>豆豆银行后台管理系统</h1>
      <p class="welcome-text">欢迎回来，管理员！请选择您要管理的模块</p>
    </div>

    <div class="module-cards">
      <!-- 客户管理模块 -->
      <el-card class="module-card" shadow="hover" @click="$router.push('/customers')">
        <div class="card-content">
          <div class="icon-container customer-icon">
            <el-icon><User /></el-icon>
          </div>
          <h3>客户管理</h3>
          <p class="description">管理银行客户信息，包括新增、编辑和查询客户资料</p>
          <el-button type="primary" class="enter-button">进入模块</el-button>
        </div>
      </el-card>

      <!-- 账户管理模块 -->
      <el-card class="module-card" shadow="hover" @click="$router.push('/accounts')">
        <div class="card-content">
          <div class="icon-container account-icon">
            <el-icon><Wallet /></el-icon>
          </div>
          <h3>账户管理</h3>
          <p class="description">管理银行账户，包括开户、销户和账户状态维护</p>
          <el-button type="success" class="enter-button">进入模块</el-button>
        </div>
      </el-card>

      <!-- 交易管理模块 -->
      <el-card class="module-card" shadow="hover" @click="$router.push('/transactions')">
        <div class="card-content">
          <div class="icon-container transaction-icon">
            <el-icon><Refresh /></el-icon>
          </div>
          <h3>交易管理</h3>
          <p class="description">处理存款、取款、转账等银行业务操作</p>
          <el-button type="warning" class="enter-button">进入模块</el-button>
        </div>
      </el-card>
    </div>

    <div class="quick-stats">
      <el-card shadow="never" class="stats-card">
        <template #header>
          <div class="stats-header">
            <span>系统概览</span>
            <el-tag type="info">实时数据</el-tag>
          </div>
        </template>
        <div class="stats-grid">
          <div class="stat-item">
            <div class="stat-label">注册客户</div>
            <div class="stat-value">1,024</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">银行账户</div>
            <div class="stat-value">2,048</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">今日交易</div>
            <div class="stat-value">356</div>
          </div>
          <div class="stat-item">
            <div class="stat-label">系统状态</div>
            <div class="stat-value"><el-tag type="success">运行正常</el-tag></div>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { User, Wallet, Refresh } from '@element-plus/icons-vue'
</script>

<style scoped>
.dashboard-container {
  padding: 30px;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  text-align: center;
  margin-bottom: 40px;
}

.header h1 {
  font-size: 28px;
  color: #303133;
  margin-bottom: 10px;
}

.welcome-text {
  font-size: 16px;
  color: #606266;
}

.module-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 24px;
  margin-bottom: 30px;
}

.module-card {
  cursor: pointer;
  transition: transform 0.3s, box-shadow 0.3s;
  border-radius: 12px;
  height: 100%;
}

.module-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}

.card-content {
  padding: 24px;
  text-align: center;
}

.icon-container {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
  font-size: 32px;
  color: white;
}

.customer-icon {
  background: linear-gradient(135deg, #409EFF 0%, #79BBFF 100%);
}

.account-icon {
  background: linear-gradient(135deg, #67C23A 0%, #95DE64 100%);
}

.transaction-icon {
  background: linear-gradient(135deg, #E6A23C 0%, #F3D19E 100%);
}

.module-card h3 {
  font-size: 20px;
  margin-bottom: 12px;
  color: #303133;
}

.description {
  color: #606266;
  font-size: 14px;
  margin-bottom: 24px;
  line-height: 1.6;
}

.enter-button {
  width: 120px;
}

.quick-stats {
  margin-top: 30px;
}

.stats-card {
  border-radius: 12px;
}

.stats-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: bold;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
  padding: 16px;
}

.stat-item {
  text-align: center;
  padding: 16px;
  background-color: #f5f7fa;
  border-radius: 8px;
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 8px;
}

.stat-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

@media (max-width: 768px) {
  .module-cards {
    grid-template-columns: 1fr;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
  }
}
</style>